<template>
	<view class="video-container">
		<!-- 视频播放器 -->
		<view class="video-player">
			<video id="myVideo" :src="currentCourse.course_url" controls autoplay :title="currentCourse.title"
				class="video" @play="onPlay" @pause="onPause" @ended="onEnded" @timeupdate="onTimeUpdate"></video>
		</view>

		<!-- 课程信息 -->
		<view class="course-info">
			<view class="course-header">
				<text class="course-title">{{currentCourse.title}}</text>
				<text class="course-duration">⏱ {{formatDuration(currentCourse.length_time)}}</text>
			</view>
			<text class="course-desc">{{currentCourse.info}}</text>

			<!-- 学习进度 -->
			<view class="progress-container">
				<text class="progress-label">学习进度</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{width: progressPercent + '%'}"></view>
				</view>
				<text class="progress-percent">{{progressPercent}}%</text>
			</view>
		</view>

		<!-- 控制按钮 -->
		<view class="control-buttons">
			<button class="btn" @click="togglePlay">{{isPlaying ? '暂停' : '播放'}}</button>
			<button class="btn" @click="markAsCompleted" v-if="progressPercent < 100">完成学习</button>
		</view>
	</view>
</template>

<script>
	import {
		studyComplete,
		startStudy
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				currentCourse: {}, // 当前课程数据
				videoContext: null, // 视频上下文
				isPlaying: false, // 是否正在播放
				currentTime: 0, // 当前播放时间
				progressPercent: 0, // 进度百分比
				duration: 0 // 视频总时长
			}
		},
		onLoad(options) {
			// 解析传递过来的课程数据
			if (options.course) {
				this.currentCourse = JSON.parse(decodeURIComponent(options.course));
				// 根据学习状态设置初始进度
				this.progressPercent = this.currentCourse.study_status === 2 ? 100 :
					(this.currentCourse.study_status === 1 ? 30 : 0);
				this.onstartStudy()
			}

			// 初始化视频上下文
			this.$nextTick(() => {
				this.videoContext = uni.createVideoContext('myVideo', this);
			});
		},
		methods: {
			// 格式化时长
			formatDuration(minutes) {
				const hours = Math.floor(minutes / 60);
				const mins = Math.floor(minutes % 60);
				return `${hours}小时${mins > 0 ? `${mins}分钟` : ''}`;
			},
			onstartStudy() {
				let data = {
					courseId: this.currentCourse.id,
					teacherId: uni.getStorageSync("teacher").id,
					projectId: this.currentCourse.projectId,
				}
				startStudy(data).then(res => {

				})
			},

			// 播放/暂停切换
			togglePlay() {
				if (this.isPlaying) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			},

			// 视频开始播放
			onPlay() {
				this.isPlaying = true;
			},

			// 视频暂停
			onPause() {
				this.isPlaying = false;
			},

			// 视频结束
			onEnded() {
				this.isPlaying = false;
				this.progressPercent = 100;
				this.markAsCompleted();
			},

			// 时间更新
			onTimeUpdate(e) {
				this.currentTime = e.detail.currentTime;
				this.duration = e.detail.duration;

				// 计算进度百分比
				if (this.duration > 0) {
					const percent = (this.currentTime / this.duration) * 100;
					// 只有当进度大于当前记录时才更新
					if (percent > this.progressPercent) {
						this.progressPercent = Math.min(100, Math.round(percent));
					}
				}
			},

			// 标记为已完成
			markAsCompleted() {
				let data = {
					courseId: this.currentCourse.id,
					teacherId: uni.getStorageSync("teacher").id
				}
				studyComplete(data).then(res => {
					if (res.state = "ok") {
						this.progressPercent = 100;
						uni.showToast({
							title: '课程已完成',
							icon: 'success'
						});
					}
				})


				// 这里可以添加API调用，更新服务器上的学习状态
				// updateCourseStatus(this.currentCourse.id, 2);
			}
		}
	}
</script>

<style>
	.video-container {
		padding: 20rpx;
		background-color: #f8fafc;
	}

	.video-player {
		width: 100%;
		height: 400rpx;
		background-color: #000;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.course-info {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.course-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.course-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.course-duration {
		font-size: 24rpx;
		color: #666;
	}

	.course-desc {
		font-size: 28rpx;
		color: #555;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}

	.progress-container {
		margin-top: 30rpx;
	}

	.progress-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.progress-bar {
		height: 12rpx;
		background-color: #e5e7eb;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.progress-fill {
		height: 100%;
		border-radius: 6rpx;
		background-color: #3b82f6;
		transition: width 0.3s ease;
	}

	.progress-percent {
		font-size: 24rpx;
		color: #3b82f6;
		text-align: right;
		display: block;
	}

	.control-buttons {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		background-color: #3b82f6;
		color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		text-align: center;
		border: none;
	}

	.btn:active {
		opacity: 0.8;
	}
</style>